<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>前台首页</title>
<link rel="stylesheet" href="css/cindex.css" />
		<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
		<link rel="stylesheet" href="css/MyStyle.css" />
		<script type="text/javascript" src="js/MoveEffect.js" ></script>
		<script type="text/javascript">
			
			$(function(){
				$(".divcart").mouseover(function(){
					$(".cart").show();
				});
				$(".divcart").mouseleave(function(){
					$(".cart").hide();
				});
				$(".menu_d_nav_li:eq(0)").mouseover(function(){
					$(".menu_d_nav_li>div:eq(0)").show();
					$(".menu_d_nav_li>div:not(eq(0))").hide();
				});
				$(".menu_d_nav_li:eq(0)").mouseleave(function(){
					$(".nav_more").hide();
				});
				$(".menu_d_nav_li:eq(1)").mouseover(function(){
					$(".menu_d_nav_li>div:eq(1)").show();
					$(".menu_d_nav_li>div:not(eq(1))").hide();
				});
				$(".menu_d_nav_li:eq(1)").mouseleave(function(){
					$(".nav_more").hide();
				});
				$(".menu_d_nav_li:eq(2)").mouseover(function(){
					$(".menu_d_nav_li>div:eq(2)").show();
					$(".menu_d_nav_li>div:not(eq(2))").hide();
				});
				$(".menu_d_nav_li:eq(2)").mouseleave(function(){
					$(".nav_more").hide();
				});
				$(".menu_d_nav_li:eq(3)").mouseover(function(){
					$(".menu_d_nav_li>div:eq(3)").show();
					$(".menu_d_nav_li>div:not(eq(3))").hide();
				});
				$(".menu_d_nav_li:eq(3)").mouseleave(function(){
					$(".nav_more").hide();
				});
				$(".menu_d_nav_li:eq(4)").mouseover(function(){
					$(".menu_d_nav_li>div:eq(4)").show();
					$(".menu_d_nav_li>div:not(eq(4))").hide();
				});
				$(".menu_d_nav_li:eq(4)").mouseleave(function(){
					$(".nav_more").hide();
				});
				var oPic=$('#fifth_ul').find('ul');             
	 			var oImg=oPic.find('li');             
	 			var oLen=oImg.length;             
	 			var oLi=oImg.width();             
	 			var prev=$("#before");             
	 			var next=$("#next");            
	 			oPic.width(oLen*290);//计算总长度            
	 			var iNow=0;             
	 			var iTimer=null;             
	 			prev.click(function(){                  
	 				if(iNow>0){                     
	 					iNow--;                   
	 				}                 
	 				ClickScroll();            
	 			})             
	 			next.click(function(){                 
	 				if(iNow<oLen-5){                      
	 					iNow++                 
	 				}                 
	 				ClickScroll();             
	 			})              
	 			function ClickScroll(){                 
//	 				iNow==0? prev.addClass('no_click'): prev.removeClass('no_click');                 
//	 				iNow==oLen-3?next.addClass("no_click"):next.removeClass("no_click");                  
	 				oPic.animate({
	 					left:-iNow*210
	 				})
	 			} 
	 			
	 			
			})
		</script>
</head>
<body>
		
		<div class="head">
			<div class="head_1">
				<div class="welcome">
					欢迎来到RottenEgg网上商城
				<ul>
					<li>|&nbsp;&nbsp;<a href="hindex.jsp">个人中心</a>&nbsp;&nbsp;</li>
					<li>|&nbsp;&nbsp;<a href="cindex.jsp">申请开店</a>&nbsp;&nbsp;</li>
					<li>|&nbsp;&nbsp;<a href="lindex.jsp">商家管理</a>&nbsp;&nbsp;</li>
					<li>|&nbsp;&nbsp;<a href="cindex.jsp">使用帮助</a></li>
				</ul>
				</div>
			</div>	
		</div>
		<div class="main">
			
			<div class="main_first">
				<div class="main_first_1">
					<div class="main_logo">
						<a href="cindex.jsp"><img src="image/logo.png"/></a>
					</div>
					<div class="main_first_2">
						<div class="main_first_i">
							<form>
								<input type="text" class="main_first_input"/>
								<input type="submit" class="main_first_sub" value="搜索" />
							</form>	
							<div class="divcart">
								<a href="cart?action=querySort"><input type="button" value="车" class="main_first_btn" /></a>
							</div>
							
							<div class="main_first_help">
								<c:if test="${sename ne null}" var="result">
									${sename }
								</c:if>
								<c:if test="${not result }">
									<div class="main_first_h"><a href="c_login.jsp">登录</a>&nbsp;&nbsp;<span style="color: gainsboro;">|</span>&nbsp;&nbsp;<a href="cuser_reg.jsp">注册</a></div>
								</c:if>
								
							</div>
						</div>
						
					</div>
				</div>
			</div>
			<div class="main_second">
				<div class="main_second_menu">	
					<ul class="menu_ul">
						<a href="cindex?action=querySort">
							<li class="menu_ul_li1">
								<a href="cindex?action=querySort" class="menu_ul_a">
								<span class="menu_ul_li1_span1">全部商品</span>
								</a>
								<div class="menu_li1_d">
									<ul class="menu_d_nav">
										<c:forEach items="${firstsort}" var="u" varStatus="vs">
											<li class="menu_d_nav_li">
												<a href="clist1?action=querySort&list1=${u }">
													<span class="nav2" style="color:white;">${u }</span>
												</a><br/>										
												<c:forEach items="${sortlist }" var="s" varStatus="ss">
													<c:if test="${ss.index eq vs.index }">
														<c:forEach items="${s}" var="n" varStatus="ns">
															<a href="clist2?action=querySort&list2=${n }">${n }</a>
														</c:forEach>
													</c:if>
												</c:forEach>
												<div class="nav_more">	
													<a href="clist1?action=querySort&list1=${u }"><h3>${u }</h3></a>
													<ul class="nav_more_list">
														<c:forEach items="${sortlist }" var="b" varStatus="bs">	
															<li>
															<c:if test="${bs.index eq vs.index }">
																<c:forEach items="${b}" var="c" varStatus="cs">
																	<a href="clist2?action=querySort&list2=${c }">${c }</a>
																</c:forEach>
															</c:if>
															</li>
														</c:forEach>
													</ul>
													<ul class="nav_content">
															<c:forEach items="${namelist }" var="x" varStatus="xs">
																<c:if test="${xs.index eq vs.index }"> 
																	<c:forEach items="${x }" var="y" varStatus="ys">
																		<a href="products?action=querySort&gname=${y }">
																			<li class="nav_content_li">
																				<c:forEach items="${pholist }" var="p" varStatus="ps">
																					<c:if test="${ps.index eq vs.index }">
																						<c:forEach items="${p}" var="h" varStatus="hs">
																							<c:if test="${hs.index eq ys.index}">
																								<img src="${h }">
																							</c:if>
																						</c:forEach>
																					</c:if>
																				</c:forEach>	
																				<h3>${y }</h3>	
																				<c:forEach items="${pricelist }" var="u" varStatus="us">
																					<c:if test="${us.index eq xs.index }">
																						<c:forEach items="${u }" var="z" varStatus="zs">
																							<c:if test="${zs.index eq ys.index}">
																								<p>${z}</p>
																							</c:if>
																						</c:forEach>
																					</c:if>
																				</c:forEach>	
																			</li>
																		</a>
																	</c:forEach>
																</c:if>
															</c:forEach>
														</ul>
													</div> 		
												</li>
											</c:forEach>
											
										</ul>
									</div>
							</li>
						</a>
						<a href="cindex?action=querySort" class="menu_ul_a"><li class="menu_ul_li2"><span class="menu_ul_li2_span">首 页</span></li></a>
						<a href="" class="menu_ul_a"><li class="menu_ul_li3"><span class="menu_ul_li2_span">商品列表</span></li></a>
						<a href="lindex.jsp" class="menu_ul_a"><li class="menu_ul_li4"><span class="menu_ul_li2_span">后台管理</span></li></a>
					</ul>
				</div>
			</div>
			<div class="main_third">
				<div class="wrapper"> 
				<div id="focus"> 
					<ul> 
						<li><a href="cindex?action=querySort"><img src="image/main1.jpg" style="width: 1300px;height:480px"/></a></li> 
						<li><a href="cindex?action=querySort"><img src="image/main2.jpg" style="width: 1300px;height:480px"/></a></li> 
						<li><a href="cindex?action=querySort"><img src="image/main3.jpg" style="width: 1300px;height:480px"/></a></li> 
					</ul> 
					<div class="focusleft"><img src="image/left.png"></div>
					<div class="focusright"><img src="image/right.png"></div>
				</div> 
				</div>
			</div>
		
		<div class="main_forth">
				<div class="main_forth_title">
					<span>热卖商品</span>
				</div>
				<div class="main_forth_content">
					<div class="forth_newad">
						<img src="image/newad.JPG" />
					</div>
					<div class="forth_goods">
						<c:forEach items="${arrhotname }" var="hotname" varStatus="hotnamest">
							<a class="forth_goods_link" href="products?action=querySort&gname=${hotname }">
								<c:forEach items="${arrhotpho }" var="hotpho" varStatus="hotphost">
									<c:if test="${hotphost.index eq hotnamest.index }">
										<img src="${hotpho }" />
									</c:if>
								</c:forEach>
								
								<h3 class="forth_goods_name">${hotname }</h3>
								
								 <c:forEach items="${arrhotprice }" var="hotprice" varStatus="hotpricest">
								 	<c:if test="${hotpricest.index eq hotnamest.index}">
								 	<p class="forth_goods_price">$ ${hotprice }</p>
								 	</c:if>
								 </c:forEach>
								
							</a>
						</c:forEach>
						
					</div>
				</div>
			</div>
		
			<div class="main_fifth">     
			<div class="fifth_head">
					推荐商品
			</div>
	 		<div class="before no_click" id="before"><img src="image/left.png"/></div>         
	 		<div class="next " id="next"><img src="image/right.png"/></div>       
	 			<div id="fifth_ul">         
	 				<ul class="fifth_ul">  
	 				<c:forEach items="${arrcomname }" var="com" varStatus="comst">
	 					<a href="products?action=querySort&gname=${com }">
							<li>
							<c:forEach items="${arrcompho }" var="compho" varStatus="comphost">
								<c:if test="${comphost.index eq comst.index }">
									<img src="${compho }" />
								</c:if>	
							</c:forEach>
							<h3>${com }</h3>
							<c:forEach items="${arrcomprice }" var="comprice" varStatus="compricest">
								<c:if test="${compricest.index eq comst.index }">
									<h4>$ ${comprice }</h4>
									<p>$ ${comprice }</p>
								</c:if>
							</c:forEach>	
								
							</li>
						</a>
	 				</c:forEach>          
		 						                 
	 				</ul>      
	 			</div>     
 			</div> 	
		

		<div class="main_sixth">
			<img src="image/bigad.png" />
		</div>
		
		<div class="main_seventh">
			<div class="seventh_head">
				特价商品
			</div>
			<ul class="seventh_ul">
				<c:forEach items="${arrspname }" var="sp" varStatus="spst">
	 					<a href="products?action=querySort&gname=${sp }">
							<li>
							<c:forEach items="${arrsppho }" var="sppho" varStatus="spphost">
								<c:if test="${spphost.index eq spst.index }">
									<img src="${sppho }" />
								</c:if>	
							</c:forEach>
								<h3>${sp }</h3>
							<c:forEach items="${arrspprice }" var="spprice" varStatus="sppricest">
								<c:if test="${sppricest.index eq spst.index }">
									<h4>$ ${spprice }</h4>
									<p>$ ${spprice }</p>
								</c:if>
							</c:forEach>	
								
							</li>
						</a>
	 				</c:forEach> 
			</ul>
		</div>
		
		
		</div>
		
		
		
		
		
		
		<div style="width: 100%;">
			<div class="foot1">
				<div style="width: 100%;background-color: rgb(240,240,240)">
					<div style="height: 360px;width: 1200px;">
						<ul class="foot_ul1">
							<li style="margin-left: 0px;"><img src="image/zhengpin.png" /></li>
							<li style="margin-left: 20px;margin-right:68px;">正品优选</li>
							<li><img src="image/shangshi.png" /></li>
							<li style="margin-left: 20px;margin-right:58px;">上市公司</li>
							<li><img src="image/liansuo2.png" /></li>
							<li style="margin-left: 20px;margin-right:68px;">3000家连锁门店</li>
							<li><img src="image/weixiudian.png" /></li>
							<li style="margin-left: 20px;margin-right:68px;">上百家维修网点 全国联保</li>
						</ul>

						<div class="foot_div1">
							<ul class="foot_ul2">
								<li class="foot_li2">▁▁</li>
								<li>
									<a href="cindex?action=querySort" style="font-size: 15px;color: rgb(58, 58, 58);">购物指南</a>
								</li>
								<li>
									<a href="cindex?action=querySort">购物流程</a>
								</li>
								<li>
									<a href="cindex?action=querySort">会员制度</a>
								</li>
								<li>
									<a href="cindex?action=querySort">积分说明</a>
								</li>
								<li>
									<a href="cindex?action=querySort">交易条款</a>
								</li>
								<li>
									<a href="cindex?action=querySort">订单状态</a>
								</li>
							</ul>
							<ul class="foot_ul3">
								<li class="foot_li2">▁▁</li>
								<li>
									<a href="cindex?action=querySort" style="font-size: 15px;color: rgb(58, 58, 58);">支付帮助</a>
								</li>
								<li>
									<a href="cindex?action=querySort">货到付款</a>
								</li>
								<li>
									<a href="cindex?action=querySort">在线支付</a>
								</li>
								<li>
									<a href="cindex?action=querySort">银行电汇</a>
								</li>
								<li>
									<a href="cindex?action=querySort">余额支付</a>
								</li>
								<li>
									<a href="cindex?action=querySort">支付帮助</a>
								</li>
							</ul>
							<ul class="foot_ul4">
								<li class="foot_li2">▁▁</li>
								<li>
									<a href="cindex?action=querySort" style="font-size: 15px;color: rgb(58, 58, 58);">配送帮助</a>
								</li>
								<li>
									<a href="cindex?action=querySort">配送范围及运费</a>
								</li>
								<li>
									<a href="cindex?action=querySort">上门自提</a>
								</li>
								<li>
									<a href="cindex?action=querySort">加急快递</a>
								</li>
								<li>
									<a href="cindex?action=querySort">商品验货与签收</a>
								</li>
								<li>
									<a href="cindex?action=querySort">EMS/邮政普包</a>
								</li>
							</ul>
							<ul class="foot_ul5">
								<li class="foot_li2">▁▁</li>
								<li>
									<a href="cindex?action=querySort" style="font-size: 15px;color: rgb(58, 58, 58);">售后服务</a>
								</li>
								<li>
									<a href="cindex?action=querySort">换货说明</a>
								</li>
								<li>
									<a href="cindex?action=querySort">退货说明</a>
								</li>
								<li>
									<a href="cindex?action=querySort">退/换货注意事项</a>
								</li>
								<li>
									<a href="cindex?action=querySort">余额的使用与提现</a>
								</li>
								<li>
									<a href="cindex?action=querySort">发票制度</a>
								</li>
							</ul>
							<ul class="foot_ul6">
								<li class="foot_li2">▁▁</li>
								<li>
									<a href="cindex?action=querySort" style="font-size: 15px;color: rgb(58, 58, 58);">帮助信息</a>
								</li>
								<li>
									<a href="cindex?action=querySort">关于我们</a>
								</li>
								<li>
									<a href="cindex?action=querySort">常见问题</a>
								</li>
								<li>
									<a href="cindex?action=querySort">找回密码</a>
								</li>
								<li>
									<a href="cindex?action=querySort">退订邮件/短信</a>
								</li>
								<li>
									<a href="cindex?action=querySort">联系客服</a>
								</li>
							</ul>

							<div class="foot_div2">
								<span class="foot_li2">▁▁</span><br /><br />
								<span style="font-size: 23px;color: rgb(58,58,58);">400-888-8888</span><br />
								<span style="font-size: 12px;color: rgb(102,102,102);">24小时在线客服(仅售市话费)</span><br /><br />
								<a href="">
									<div class="foot_div3">
										<span>在线客服</span>
									</div>
								</a>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="foot2">
				<ul class="foot_ul7">
					<li>
						<a href="cindex?action=querySort">关于我们</a>
					</li>
					<li><span>|</span>
						<a href="cindex?action=querySort">常见问题</a>
					</li>
					<li><span>|</span>
						<a href="cindex?action=querySort">安全交易</a>
					</li>
					<li><span>|</span>
						<a href="cindex?action=querySort">购买流程</a>
					</li>
					<li><span>|</span>
						<a href="cindex?action=querySort">如何付款</a>
					</li>
					<li><span>|</span>
						<a href="cindex?action=querySort">联系我们</a>
					</li>
					<li><span>|</span>
						<a href="cindex?action=querySort">合作提案</a>
					</li>
				</ul>
				<span class="foot_span2">
           	Powered by <a href="cindex?action=querySort">RottenEgg</a>
           </span>
				<span class="foot_span3">
           	Copyright © 2005-2014 <a href="cindex?action=querySort">湘ICP备01000010号</a>
           </span>
			</div>
		</div>
	</body>
</html>